<template>
  <view class="page custom-page">
    <custom-head gradient back title="最新动态"> </custom-head>
    <view class="form">
      <u-form :model="form" ref="uForm" label-width="180">
        <u-form-item label="标题">
          <u-input v-model="form.name" placeholder="请输入标题" />
        </u-form-item>
        <u-form-item label="正文内容">
          <u-input v-model="form.desc" type="textarea" placeholder="请输入最新动态正文内容" />
        </u-form-item>
        <u-form-item>
          <u-upload
            ref="uUpload"
            max-count="1"
            :file-list="fileList"
            :form-data="{ type: 'avatar' }"
            :header="{ Authorization: token }"
            :action="BASE_URL + '/file/upload'"
            @on-change="onSuccess"
            @on-remove="omRemove"
            style="height: 100px"
          >
            <view slot="addBtn">
              <text style="font-size: 80px; margin-top: 20px" class="iconfont icon-tianjiatupian"></text>
            </view>
          </u-upload>
        </u-form-item>
        <u-form-item label="是否发布">
          <u-switch slot="right" v-model="form.status"></u-switch>
        </u-form-item>
      </u-form>
      <view class="button submit" @click="submit">保存</view>
    </view>
  </view>
</template>

<script>
import { BASE_URL } from '../../api/config'
console.log('BASE_URL :', BASE_URL)
import { addTreasure, getTreasureDetail, updateTreasure } from '../../api/modules/treasure'
import { toPage } from '@/utils'

export default {
  data() {
    return {
      form: {},
      id: '',
      fileList: [],
      action: 'http://www.example.com/upload',
      BASE_URL,
      token: uni.getStorageSync('token')
    }
  },

  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.id = id
      this._getTreasureDetail(this.$route.query.id)
    }
  },

  methods: {
    toPage,

    submit() {
      this.form.status = this.form.status ? 1 : 0
      if (this.id) {
        this._updateTreasure(this.form)
      } else {
        this._addTreasure(this.form)
      }
    },
    omRemove(index) { // 移除照片
			if (index === 0) {
				this.fileList = []
				this.form.avatar_id = ''
			}
		},

    onSuccess(data) {
      console.log(data)
      const res = JSON.parse(data.data)
      if (res.code == 201) {
        this.form.avatar_id = res.data.id
      } else {
        this.$refs.uUpload.clear()
        this.$u.toast('上传失败')
      }
      console.log('res :', res)
    },

    _addTreasure(data) {
      addTreasure(data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('添加成功')
          this.form = {}
        } else {
          this.$u.toast(res.message)
        }
      })
    },

    _updateTreasure(data) {
      updateTreasure(this.id, data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('修改成功')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        } else {
          this.$u.toast(res.message)
        }
      })
    },

    _getTreasureDetail(data) {
      getTreasureDetail(data).then((res) => {
        const { id, status, name, desc, avatar_id } = res.data
        this.form = { id, status: !!status, desc, avatar_id, name }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  background-color: #fff;
  padding: 0px 45rpx;
  overflow: hidden;
}

.button {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 80rpx 0 40rpx 0;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
